import React from 'react';
import {injectIntl, formatMessage} from './intl';
import PropTypes from 'prop-types';
import {Form, Row, Alert, Modal} from 'antd';
import TextInput from 'Shared/components/TextInput';
import LocalizeInputNumber from '../common/LocalizeInputNumber';
import {
    FORM_ROW_OPTIONS,
} from '../constants';
const FormItem = Form.Item;
const autosize = {minRows: 1};
import styles from './style.css';
import ProductCategorySelectPanel from './ProductCategorySelectPanel';
import WrappedSelect from '../common/WrappedSelect';
import {isYesNo} from '../Enum';

class WorkItemEdit extends React.PureComponent {
    static getDerivedStateFromProps(props, state) {
        if(state.isDefault && props.showPanel)
            return {
                code: props.detail.code,
                name: props.detail.name,
                englishName: props.detail.englishName,
                repairModeCode: props.detail.repairModeCode,
                repairModeName: props.detail.repairModeName,
                remark: props.detail.remark,
                englishRemark: props.detail.englishRemark,
                laborHour: props.detail.laborHour,
                rowVersion: props.detail.rowVersion,
                id: props.detail.id,
                isDefault: false,
                productCategoryCode: props.detail.productCategoryCode,
                productCategoryName: props.detail.productCategoryName,
            };
        if(!props.showPanel)
            return {
                loading: false,
                id: '',
                code: '',
                name: '',
                englishName: '',
                englishRemark: '',
                laborHour: null,
                repairModeCode: '',
                repairModeName: '',
                rowVersion: '',
                remark: '',
                isDefault: true,
                isValidate: false,
                productCategoryCode: '',
                productCategoryName: '',
            };
        return null;
    }
    state = {
        loading: false,
        code: '',
        name: '',
        englishName: '',
        englishRemark: '',
        laborHour: null,
        repairModeCode: '',
        repairModeName: '',
        rowVersion: '',
        remark: '',
        isDefault: true,
        showPanel: false,
        productCategoryCode: '',
        productCategoryName: '',
    };
    componentDidMount() {
        this.ismounted = true;
    }

    componentWillUnmount() {
        this.ismounted = false;
        Modal.destroyAll();
    }

    handleFilterChange = (value, name) => {
        this.setState({
            [name]: value
        });
    }

    onCancel = () => {
        this.setState({
            code: '',
            name: '',
            englishName: '',
            repairModeCode: '',
            repairModeName: '',
            remark: '',
            laborHour: null,
            englishRemark: '',
            id: '',
            isValidate: false,
            productCategoryCode: '',
            productCategoryName: '',
        });
    }
    onSubmit = () => {
        const {name, remark, id, rowVersion, englishName, laborHour, englishRemark} = this.state;

        if(!id) return;
        if(!name)
            return this.setState({
                isValidate: true,
            });
        this.setState({
            loading: true
        });
        return this.props.onSubmit({
            id,
            name,
            remark,
            englishName,
            rowVersion,
            englishRemark,
            laborHour
        }).then(success => {
            if(success && !this.ismounted)
                this.props.onCancel();
            else
                this.setState({
                    loading: false,
                });
        });
    }
    render() {
        return (
            <div>
                <Modal
                    title={this.props.intl.formatMessage({
                        id: 'workItemEdit.modale.title',
                        defaultMessage: '编辑'
                    })}
                    width="40%"
                    maskClosable={false}
                    onOk={this.onSubmit}
                    destroyOnClose={true}
                    confirmLoading={this.state.loading}
                    visible={this.props.showPanel}
                    onCancel={this.props.onCancel}>
                    <Form className="form-standard">
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.form.code',
                                    defaultMessage: '编号'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                {this.state.code}
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                validateStatus={this.state.isValidate && !this.state.name ? 'error' : null}
                                required
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.form.name',
                                    defaultMessage: '名称'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <TextInput name="name"
                                    value={this.state.name} onBlur={this.handleFilterChange} />
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                validateStatus={this.state.isValidate && !this.state.name ? 'error' : null}
                                required
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.form.englishName',
                                    defaultMessage: '英文名称'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <TextInput name="englishName"
                                    value={this.state.englishName} onBlur={this.handleFilterChange} />
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.form.productCategoryCode',
                                    defaultMessage: '车型编号'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                {this.state.productCategoryCode}
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.form.productCategoryName',
                                    defaultMessage: '车型名称'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                {this.state.productCategoryName}
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                validateStatus={this.state.isValidate && !this.state.laborHour ? 'error' : null}
                                required
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.form.laborHour',
                                    defaultMessage: '工时'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <LocalizeInputNumber name="laborHour"
                                    value={this.state.laborHour} onBlur={this.handleFilterChange} />
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.form.isCustomed',
                                    defaultMessage: '是否自定义'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                {this.state.isCustomed ? this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.yes',
                                    defaultMessage: '是'
                                }) : this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.no',
                                    defaultMessage: '否'
                                })}
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.remark',
                                    defaultMessage: '备注'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <TextInput type="textarea" name="remark" autosize={autosize}
                                    value={this.state.remark} onBlur={this.handleFilterChange} />
                            </FormItem>
                        </Row>
                        <Row>
                            <FormItem
                                label={this.props.intl.formatMessage({
                                    id: 'workItemEdit.modale.englishRemark',
                                    defaultMessage: '英文备注'
                                })}
                                {...FORM_ROW_OPTIONS.item}>
                                <TextInput type="textarea" name="englishRemark" autosize={autosize}
                                    value={this.state.englishRemark} onBlur={this.handleFilterChange} />
                            </FormItem>
                        </Row>
                        {this.state.isValidate && !this.state.name && <Alert message={this.props.intl.formatMessage({
                            id: 'workItemEdit.modal.alertMessage',
                            defaultMessage: '名称不能为空'
                        })} className={styles.mdalAlertMargin} type="warning" showIcon />}
                    </Form>
                    {
                        this.state.showPanel && <ProductCategorySelectPanel />
                    }
                </Modal>
            </div>
        );
    }
}

WorkItemEdit.propTypes = {
    detail: PropTypes.object,
    intl: PropTypes.object,
    showPanel: PropTypes.bool,
    onCancel: PropTypes.func,
    onSubmit: PropTypes.func
};
export default injectIntl(WorkItemEdit);
